<template>
	<view>
		<view class="card">
			<view class="start-center">
				<view>
					<view class="sheet-dept">领取方式</view>
					<view class="center">
						<view class="title-bg"></view>
					</view>
				</view>
			</view>
			<view class="mar-10-0">
				<u-radio-group v-model="form.getMethod">
					<u-radio name='face'>现场领取</u-radio>
					<u-radio name='ems'>邮寄</u-radio>
				</u-radio-group>
			</view>
			<view class="start-center">
				<view class="pat-name" v-if="form.patName">{{form.patName}}</view>
				<view class="mar-0-10" v-if="form.patPhone">{{patPhone}}</view>
			</view>
			<view class="pat-address" v-if="form.provice">{{form.province+form.city+form.district+form.patAddress}}
			</view>
		</view>
		<view class="card mar-10-0">
			<view class="between-center">
				<view class="start-center">
					<view>
						<view class="sheet-dept">复印内容</view>
						<view class="center">
							<view class="title-bg"></view>
						</view>
					</view>
				</view>
				<view>分数：{{form.copyNum}} 份</view>
			</view>
			<view class="list-content">
				<view v-for="(item,index) in form.listCopy" class="list-item">
					<view class="item-content" :class="item.active?'active':''">
						{{item.name}}
					</view>
				</view>
			</view>

		</view>
		<view class="card mar-10-0">
			<view class="start-center">
				<view>
					<view class="sheet-dept">费用金额</view>
					<view class="center">
						<view class="title-bg"></view>
					</view>
				</view>
			</view>
			<view>
				<view class="copy-money">
					<view>病历复印件预付款</view>
					<view>￥{{form.cash*form.copyNum}}</view>
				</view>
				<view class="copy-money">
					<view>运费</view>
					<view>￥{{form.emsMoney}}</view>
				</view>
			</view>
			<view class="flex-end">
				<view>费用合计:</view>
				<view class="color-red">￥{{form.cash*form.copyNum+form.emsMoney}}</view>
			</view>
		</view>
		<view class="card mar-10-0">
			<view class="start-center">
				<image class="img" src="/static/images/imgs/img-tanhao.png"></image>
				<view class="sheet-dept">服务须知</view>
			</view>
			<view>
				<view>1、支付复印费预付款100元，根据实际打印张数计算价格后多退少补;每张复印纸为0.5/张;</view>
				<view>2、下单后，医院审核通过后将在7天内完成邮寄。</view>
			</view>
		</view>
		<ButtonAllVue btn-r="确认提交并支付"></ButtonAllVue>
	</view>
</template>

<script>
	import ButtonAllVue from '../../../../components/Button/ButtonAll.vue'
	export default {
		components: {
			ButtonAllVue
		},
		props: {
			step: Number,
			form: Object
		},
		data() {
			return {
				patPhone: ''
			}
		},
		mounted() {
			this.patPhone = this.form.patPhone
			this.patPhone = this.patPhone.substring(0, 3) + "****" + this.patPhone.substring(7)
		},
		methods: {

		}
	}
</script>

<style scoped>
	.card {
		background-color: white;
		border-radius: 16px;
		padding: 16px;
		box-shadow: 0 5px 1000px 1rpx #e0e2e7;
	}

	.sheet-dept {
		font-size: 20px;
		color: #333;
		font-weight: bold;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.title-bg {
		width: 48px;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		margin-top: -10px;
	}

	.pat-name {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.pat-address {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 13px;
		color: #666666;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.list-content {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 10px 0;
	}

	.list-item {
		margin: 0 10px;
	}

	.item-content {
		border-radius: 16px;
		background-color: rgb(228, 252, 253);
		padding: 10px;
		margin: 10px 0;
		text-align: center;
		font-size: 14px;
	}

	.active {
		background-color: rgb(103, 220, 230);
		color: white;
	}

	.copy-money {
		background-color: rgb(246, 246, 246);
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		line-height: 40px;
		border-radius: 16rpx;
		margin: 10px 0;
	}

	.img {
		width: 20px;
		height: 20px;
	}
</style>